<template>
  <div>
    <el-dialog title="新增" :visible.sync="dialog_info_flag" @close="close" width="580px" @opened="openDialog">
      <el-form :model="form" ref="addInfoForm">
        <el-form-item label="分类：" :label-width="formLabelWidth">
          <el-select v-model="form.category" placeholder="请选择">
            <el-option
              v-for="item in categoryOption.item"
              :key="item.id"
              :label="item.category_name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标题：" :label-width="formLabelWidth">
          <el-input v-model="form.title" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="概况：" :label-width="formLabelWidth">
          <el-input type="textarea" v-model="form.content"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="danger" :loading="submitLoading" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { reactive, ref, watch } from '@vue/composition-api'
import { AddInfo } from '@/api/news'
export default {
  name: 'dialogInfo',
  // 单向数据流，父级 -> 子级，不能反向修改数据
  props: {
    flag: {
      type: Boolean,
      default: false
    },
    category: {
      type: Array,
      default: () => []
    }
  },
  setup (props, { emit, root, refs }) {
    const dialog_info_flag = ref(false)
    const formLabelWidth = ref('70px')
    const form = reactive({
      category: '',
      title: '',
      content: ''
    })
    const categoryOption = reactive({
      item: []
    })
    const submitLoading = ref(false)
    watch (() => dialog_info_flag.value = props.flag)
    const close = (() => {
      dialog_info_flag.value = false
      emit('update:flag', false)
      resetForm()
    })
    const openDialog = () => {
      categoryOption.item = props.category
    }
    const resetForm = () => {
      form.category = '',
      form.title = '',
      form.content = ''
    }
    const submit = () => {
      let requestData = {
        category: form.category,
        title: form.title,
        content: form.content
      }
      if (!requestData.category) {
        root.$message({
          message: '分类信息不能为空',
          type: "error"
        })
        return
      }
      if (!requestData.title) {
        root.$message({
          message: '标题不能为空',
          type: "error"
        })
        return
      }
      AddInfo(requestData).then(response => {
        let data = response.data
        root.$message({
          message: data.message,
          type: "success"
        })
        submitLoading.value = false
        // 重置表单
        resetForm()
      }).catch(error => {
        submitLoading.value = false
      })
    }
    return {
      dialog_info_flag, formLabelWidth, form,categoryOption,
      submitLoading,
      close,resetForm,
      openDialog,submit
    }
  }
}
</script>

<style scoped>

</style>
